<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    top="10vh"
    title="分配用户角色"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <el-checkbox-group class="radio-box" v-model="selectOption">
      <div class="radio-item-box" v-for="item in roleList" :key="item.roleId">
        <el-checkbox border class="radio-item" :label="item.roleId">
          {{ item.roleName }}
        </el-checkbox>
      </div>
    </el-checkbox-group>

    <div style="text-align: center; margin-top: 10px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, prev, pager, next, sizes"
        :total="total"
      ></el-pagination>
    </div>

    <div style="margin-top: 20px; text-align: right">
      <el-button plain type="info" @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRoleApi, saveUserRoleApi, getUserRoleApi } from '@/api/role.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 5
      },
      roleList: [],
      total: 0,
      selectOption: []
    }
  },
  mounted() {
    this.getRoleList(this.params)
  },
  watch: {
    show(value) {
      if (value && this.editRow.userId) {
        this.getUserRole(this.editRow.userId)
      }
    }
  },
  methods: {
    beforeClose() {
      this.selectOption = []
      this.$emit('update:show', false)
    },
    handleCancel() {
      this.beforeClose()
    },
    async handleConfirm() {
      if (!this.selectOption.length) {
        return this.$message.warning('请选择要分配的角色')
      }
      let res = await saveUserRoleApi({
        userId: this.editRow.userId,
        roleIdList: this.selectOption
      })
      if (res.success) {
        this.$message.success('分配用户角色成功！')
        this.beforeClose()
      }
    },
    async getRoleList(params) {
      let res = await getRoleApi(params)
      if (res.success) {
        this.roleList = res.data.list
        this.total = res.data.total
      }
    },
    async getUserRole() {
      let res = await getUserRoleApi({ userId: this.editRow.userId })
      if (res.success) {
        this.selectOption = res.data
      }
    },
    handleSizeChange(val) {
      this.params.pageNum = 1
      this.params.pageSize = val
      this.getRoleList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getRoleList(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px;
}
::v-deep .radio-box {
  width: 100%;
  .radio-item-box {
    width: 100%;
  }
  .radio-item {
    width: 100%;
    margin: 5px;
  }
}
</style>
